<template>
	<view class="box">
		<view class="topBox">
			<view class="topBoxCont">
				<view class="topNav">
					<view :class="type==1? 'navCh2':'navCh'" @click="checkType(1)">
						补货申请
					</view>
					<view :class="type==2? 'navCh2':'navCh'" @click="checkType(2)">
						套餐购买
					</view>
					<view :class="type==3? 'navCh2':'navCh'" @click="checkType(3)">
						桌牌申请
					</view>
				</view>
			</view>
		</view>
		<view class="listBox">
			<view class="list">
				<view class="listTop">
					<view class="listOrder">
						ddxxxxxxxxxxxxx
					</view>
					<view class="orderStuts">
						<text style="color: rgb(99, 161, 3);">已完成</text><uni-icons type="right" size="25"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1
			}
		},
		methods: {
			checkType(e) {
				this.type = e
			},
		}
	}
</script>

<style>
	.box {
		width: 100%;
		min-height: 100vh;
		background-color: white;
		overflow: hidden;
	}

	.topBox {
		width: 750rpx;
		height: 100rpx;
		margin: 0rpx auto;
		position: fixed;
		top: 40rpx;
	}

	.topBoxCont {
		width: 700rpx;
		height: 140rpx;
		margin: 10rpx auto;
	}

	.topNav {
		width: 700rpx;
		height: 70rpx;
		margin-top: 20rpx;
		border: 1px solid rgb(147, 147, 147);
		border-radius: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		overflow: hidden;
	}

	.navCh {
		/* width: 33%; */
		flex: 1 1 auto;
		height: 70rpx;
		line-height: 75rpx;
		font-size: 28rpx;
		border-right: 1px solid rgb(147, 147, 147);
		text-align: center;
	}

	.navCh2 {
		/* width: 35%; */
		flex: 1 1 auto;
		height: 70rpx;
		line-height: 75rpx;
		font-size: 28rpx;
		border-right: 1px solid rgb(147, 147, 147);
		text-align: center;
		color: white;
		background-color: rgb(60, 156, 255);
	}

	.listBox {
		width: 700rpx;
		margin: 150rpx auto;
	}

	.list {
		width: 700rpx;
		height: 200rpx;
		margin-top: 20rpx;
		border: 1px solid rgb(147, 147, 147);
		border-radius: 15rpx;
	}

	.listTop {
		width: 650rpx;
		height: 80rpx;
		margin: 10rpx auto;
		/* background-color: red; */
		display: flex;
		justify-content: space-between;
	}

	.listOrder {
		width: 450rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		/* background-color: green; */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.orderStuts {
		width: 150rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* background-color: red; */
	}
</style>